<template>
    <div class="echarts01" ref="echarts01"></div>
</template>

<script>
import * as echarts from 'echarts';
import http from '@/http'

const colorArr = [
    "rgb(250,105,0)",
    "rgb(254,33,30)",
    "rgb(22,239,214)",
    "rgb(44,109,252)",
    "rgb(11,167,44)"
].reverse();

export default {
    data() {
        return {
            myecharts: null,
            option: {
                color: colorArr,
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                legend: {
                    data: [],
                    icon: "circle",
                    textStyle: {
                        color: "#fff"
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: [],
                    splitLine: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#fff'
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    splitLine: {
                        show: false
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#fff'
                        }
                    }
                },
                series: []
            }
        }
    },
    methods: {
        async getdata() {
            try {
                let res = await http.get('/trend.json');
                console.log('API Response:', res);

                // 更新xAxis数据
                this.option.xAxis.data = res.common.month;

                // 更新legend数据
                this.option.legend.data = res.map.data.map(item => item.name);

                // 清空并重新设置series
                this.option.series = res.map.data.map((item, index) => ({
                    name: item.name,
                    type: 'line',
                    stack: 'Total',
                    smooth: true,
                    showSymbol: false,
                    areaStyle: {
                        opacity: 0.8,
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: colorArr[index]
                            },
                            {
                                offset: 1,
                                color: colorArr[index].replace(")", ",0)")
                            }
                        ])
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: item.data
                }));

                // 使用新的option更新图表
                this.myecharts.setOption(this.option);
            } catch (error) {
                console.error('获取数据失败:', error);
            }
        }
    },
    mounted() {
        this.myecharts = echarts.init(this.$refs.echarts01);
        // 首次初始化时不设置option，等数据获取后再设置
        this.getdata();

        // 添加窗口大小变化监听
        window.addEventListener('resize', () => {
            this.myecharts.resize();
        });
    },
    beforeDestroy() {
        // 组件销毁时移除监听器
        window.removeEventListener('resize', () => {
            this.myecharts.resize();
        });
        // 销毁图表实例
        this.myecharts.dispose();
    }
}
</script>

<style scoped>
.echarts01 {
    width: 100%;
    height: 100%;
}
</style>